<template>
  <div class="home-source">
    <el-card class="box-card">
      <div slot="header">
        <span class="box-header"><i class="iconfont icon-tongzhigonggao"/>公告</span>
        <!--        <router-link to="/source" style="margin-left: 280px; font-size: 12px;text-decoration: none;color: #4c4948;">更多&gt;</router-link>-->
      </div>
      <div class="source-list">
        <el-table
            :data="noticeList"
            :show-header="false"
            @row-click="handleClick"
            style="width: 100%">
          <el-table-column
              width="230px"
              prop="title">
          </el-table-column>
          <el-table-column
              prop="createTime">
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import {listNotice} from "@/api";
import {MessageBox} from "element-ui";

export default {
  name: "home-notice",
  data() {
    return {
      noticeList: []
    }
  },
  created() {
    this.listNotice()
  },
  methods: {
    listNotice() {
      listNotice({limit: 3}).then(res => {
        this.noticeList = res.data;
      })
    },
    handleClick(row) {
      MessageBox.confirm(row.content, row.title, {
        showConfirmButton: false,
        showCancelButton: false
      }).then(() => {
      }).catch(() => {
      });
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 100%;
  margin-bottom: 20px;
}

.box-header:hover {
  color: red;
  font-weight: bold;
}

.source-list a {
  color: #545454;
  display: inline-block;
  text-decoration: none;
  padding: 0 5px;
  line-height: 1.5;
  transition: all 0.3s;
}

.source-list a:hover {
  color: #03a9f4 !important;
  transform: scale(1.1);
}
</style>
